<template>
  <div>
    <view class="pwd_box">
			<view class="title">请输入支付密码</view>
			<view class="cancel_btn" @click="cancel">
				<u-icon name="close" color="#999" size="35"></u-icon>
			</view>
			<u-message-input
				:value="pass"
				disabled-keyboard
				:maxlength="6"
				dot-fill
			></u-message-input>
      <view style="color: #F2270C;text-align: center;margin-top: 24rpx"></view>
		</view>
		<u-keyboard
			:disabled-keyboard="false"
			:mask-close-able="false"
			ref="uKeyboard"
			v-model="show"
			:show-tips="false"
			:dot-enabled="false"
			:tooltip="false"
			random
			@change="valChange"
			@backspace="backspace"
		></u-keyboard>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      show: true,
      pass: ''
    }
  },
  methods: {
    // 按键被点击(点击退格键不会触发此事件)
		valChange(val) {
			// 将每次按键的值拼接到value变量中，注意+=写法
      if (this.pass.length < 6) {
        this.pass += val
      }
      this.$emit('input', this.pass)
			if (this.pass.length === 6) {
        this.$emit('success')
				return
			}
		},
		// 退格键被点击
		backspace() {
			// 删除value的最后一个字符
			if (this.pass.length) {
        this.pass = this.pass.substr(0, this.pass.length - 1)
      }
      this.$emit('input', this.pass)
		},

    cancel() {
      this.$emit('cancel')
    }
  }
}
</script>
<style lang="scss" scoped>
.pwd_box {
		padding: 0 0rpx 130rpx 0;
		width: 650rpx;
    height: 414rpx;
		border-radius: 18rpx;
		margin: 0 50rpx;
		position: fixed;
		left: 0;
		top: 30%;
		z-index: 9999999;
		background-color: #fff;
		.title {
			text-align: center;
			font-size: 35rpx;
      margin-top: 90rpx;
			margin-bottom: 70rpx;
      
		}
		.cancel_btn {
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}
</style>